<template>
    <div class="login-right">
        <div class="title">
            <p class="name">{{type}}编程博客</p>
            <p>让编程更简单</p>
            <div class="from">
                <input 
                    type="text" 
                    placeholder="请输入用户名" 
                    v-model="username"
                    @blur="sendUserInfo"
                >
                <input 
                    type="password" 
                    placeholder="请输入密码" 
                    v-model="password"
                    @blur="sendUserInfo"
                >
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name:"Login-Right",
        props:['type',],
        data(){
            return {
                username:"",
                password:"",
            }
        },
        methods:{
            sendUserInfo(){
                this.$bus.$emit('sendUserInfo',{username:this.username,password:this.password})
            }
        },
    }
</script>

<style lang="less" scoped>

        .title{
            text-align: center;

            p{
                margin:0;
                color: rgb(126, 126, 126);
                font-size: 1.5vw;
            }

            .name{
                margin: 20px 0;
                font-size: 2vw;
                color: #333;
            }                    
        }

        .from{
            display: flex;
            width: 20vw;
            margin: 0 auto;
            flex-direction: column;
            margin-top: 3.3vw;
            position: relative;

            input{
                margin-bottom: 3vw;
                height: 2.9vw;
                padding-left: 0.7vw;
                border-radius: 1.3vw;
                border: 0.1vw solid #333;
                transition: 0.5s;
                outline: 0;
                font-size: 1vw;

                &:focus{
                    font-size: 1.4vw;
                    box-shadow: 0 0 5px 5px rgba(129, 146, 202, 0.356);
                }

            }

            button{
                height: 2.3vw;
                cursor: pointer;

                &:hover{
                    color: #fff;
                    background: #333;
                }
            }
        }
                
    
</style>